<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>添加用户</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-upload
                    class="avatar-uploader"
                    action="http://localhost:10101/upload/thumb"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="base64" :src="base64" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <br>
            <div class="form-box">
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="用户账号" prop="username">
                        <el-input placeholder="请输入用户账号" v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码" prop="password">
                        <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="tel">
                        <el-input placeholder="请输入手机号" v-model="form.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱地址" prop="email">
                        <el-input placeholder="请输入手机号" v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="职位" prop="rid">
                        <el-select v-model="form.rid" class="handle-select mr10">
                            <el-option key="0" label="" value=""></el-option>
                            <el-option :key="item.id" :label="item.job" :value="item.id"
                                       v-for="item in roles"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import service from "../../utils/request";
    import {Base64Utils} from "../../utils/Base64Utils";

    export default {
        name: 'userAdd',
        data() {
            return {
                file: null,
                base64: '',
                form: {
                    username: '',
                    name: '',
                    password: '',
                    rid: '',
                    tel: '',
                    email: '',
                }, rules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    rid: [
                        {required: true, message: '请选择职务', trigger: 'change'}
                    ],
                    tel: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入电子邮箱', trigger: 'blur'}
                    ],
                    desc: [
                        {required: true, message: '请填写活动形式', trigger: 'blur'}
                    ]
                },
                imageUrl: '',
                roles: []
            };
        },
        methods: {
            getRole() {
                service.get('/roles/getRoles').then(res => {
                    this.roles = res.message
                })
            },
            onSubmit() {
                service.get('/users/check', {
                    params: {
                        userId: JSON.parse(localStorage.getItem("userInfo")).id
                    }
                }).then(res => {
                    if (res !== 2) {
                        this.$message.error('对不起，您没有权限')
                    } else {
                        if (this.file == null || this.base64 == null) {
                            this.$message.error('头像不能为空');
                        }
                        let formData = new FormData();
                        console.log(this.file)
                        formData.append("file", this.file);
                        for (let key in this.form) {
                            formData.append(key, this.form[key])
                        }
                        service.post("/users/add", formData).then(res => {
                            this.$message.success('提交成功！');
                            this.$router.push('/userManage')
                        })
                    }
                })
            }, handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                this.file = file
                Base64Utils.getImgToBase64(file).then(res => {
                    this.base64 = res
                })
                // return isJPG && isLt2M;
                return false;
            }
        }, created() {
            this.getRole()
        }
    };
</script>
<style>
    .avatar-uploader {
        margin-left: 20%;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 120px;
        height: 120px;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 18px;
        color: #8c939d;
        line-height: 125px;
        text-align: center;
    }

    .avatar {
        width: 100%;
        height: 100%;
        display: block;
    }
</style>
